<template>
  <table class="table table-striped table-bordered custom-table">
    <!-- 表格标题区域 -->
    <thead>
      <tr><!-- 6. 以具名插槽的形式展示表格标题区域 -->
        <slot name="header"></slot>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
		<!-- 8. 在 MyTable 组件中渲染表格的数据行 -->
      <tr v-for="(item, index) in goodsList" :key="item.id">
		<!-- 9 把表格里面的数据行中的<td>标签预留为具名插槽 -->
        <slot name="body" :row="item" :index="index"></slot>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
	// 4. 在 MyTable 组件的 props 属性中声明 goodsList 数据源
const props = defineProps({
  goodsList: {
    type: Array,
    required: true,
    default: []
  }
})
</script>

<style scoped>
.custom-table {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  color: #333;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.custom-table thead th {
  background-color: #333;
  color: #fff;
}
</style>